
import React, { PureComponent } from 'react'

import { Form, Input, Button, Checkbox } from 'antd';
import { connect } from 'react-redux'
const FormItem = Form.Item;
import PageBackHeader from "@common/PageBackHeader";
import { withRouter } from 'react-router-dom'
import { creatRole, editRole, getPermissionList } from "@sagas/employee";
import { getHistoryMatchParams } from "@utils/setUrlQuery";

const getReformedData = (data) => {
    const _data = {
        ...data
    }
    return {
        ..._data,
        routers: data.role_permissions.map(item=>item.router)
    }
}

const initialValue = {
    role_name: '',
}

@connect(({ employee }) => ({
    permissionList: employee.permissionList,
}), {
    getPermissionList,
    editRole,
    creatRole
})
@withRouter
class EmployeeRoleCreatePage extends PureComponent {

    constructor(props) {
        super(props);
        const { location } = props
        const { id } = getHistoryMatchParams(props)
        const { state } = location
        this.state = {
            id,
            formData: id ? {
                ...initialValue,
                ...getReformedData(state),
            } : {
                ...initialValue
            }
        }
        this.formRef = React.createRef()

        this.handleSubmit = this.handleSubmit.bind(this)
        this.submitForm = this.submitForm.bind(this)
        this.cancelFunc = this.cancelFunc.bind(this)
    }

    componentDidMount(){
        this.props.getPermissionList()
    }

    handleSubmit(values) {
        const { id } = this.state
        console.log(values)
        if (id) {
            this.props.editRole({
                ...values,
                role_id: id,
            }, () => {
                this.cancelFunc()
            })
        } else {
            this.props.creatRole({
                ...values
            }, () => {
                this.cancelFunc()
            })
        }
    }

    submitForm() {
        this.formRef.current?.submit()
    }

    cancelFunc() {
        this.props.goBack ? this.props.goBack() : this.props.history.goBack()
    }

    render() {
        const { formData, id } = this.state
        const { permissionList } = this.props
        const isEdit = !!id
        return (
            <div className="bilin-web">
                <PageBackHeader title={isEdit ? '编辑角色' : '新建角色'} />
                <div className="bilin-web-body form-page with-footer">
                    <Form
                        ref={this.formRef}
                        name="role-edit"
                        className='pdt-36 role-edit'
                        labelCol={{ span: 4 }}
                        wrapperCol={{ span: 20 }}
                        initialValues={formData}
                        scrollToFirstError={{
                            behavior: actions =>
                                actions.forEach(({ el, top, left }) => {
                                    el.scrollTop = top - 100
                                    el.scrollLeft = left
                                }),
                        }}
                        onFinish={this.handleSubmit}
                    >
                        <FormItem
                            label="角色名称: "
                            name='role_name'
                            rules={[
                                { required: true, message: '请输入名称', },
                            ]}
                        >
                            <Input style={{ width: '360px' }} placeholder="请输入名称" />
                        </FormItem>
                        <FormItem
                            label="选择权限: "
                            name='routers'
                            rules={[
                                { required: false },
                            ]}
                        >
                            <Checkbox.Group
                                options={(permissionList || []).map(item=>{
                                    return {
                                        label: item.per_name,
                                        value: item.router
                                    }
                                })}
                            />
                        </FormItem>

                    </Form>
                </div>
                <div className="bilin-web-footer">
                    <Button type="primary" ghost onClick={this.cancelFunc}>取消</Button>
                    <Button type="primary" onClick={this.submitForm}>{isEdit ? '修改' : '保存'}</Button>
                </div>
            </div>

        )
    }
}

export default EmployeeRoleCreatePage